import React from 'react'
import axios from 'axios'
import 'bootstrap/dist/css/bootstrap.min.css'
import { mapStateToProps, mapDispatchToProps } from '../redux/action.js'
import { Provider, connect } from 'react-redux'
import '../css/cart.scss'
import store from '../redux/reducer'

class Cart extends React.Component {
  constructor() {
    super()
    this.state = {
      list: [],
      arr: [],
      number: '结算(0)'
      // checkedAll: false //全选状态
    }
    // this.handleAllChange = this.handleAllChange.bind(this)
  }
  componentWillMount() {
    store.subscribe(() => {
      this.setState({
        list: this.props.cart
      })
    })
    // console.log(this.props.cart)
  }
  //统计选中的数量;
  countNum() {
    var number = 0
    var list = this.state.arr
    for (var i in list) {
      for (var j in this.props.cart) {
        if (list[i] == this.props.cart[j].id) {
          number += this.props.cart[j].num
        }
      }
    }
    number = '结算(' + number + ')'
    // this.setState({
    //   number: number
    // })
    return number
  }
  count(k) {
    //获取所有的文本框  如果val值在数组中选中  否则 不选中
    var list = this.state.arr
    var s = list.findIndex((value, index, list) => value == k)
    if (s == -1) {
      list.push(k)
    } else {
      list.splice(s, 1)
    }
    this.setState({
      arr: list
    })
    this.countNum()
  }
  //计算选中的价格
  total() {
    var list = this.state.arr
    //在list中存储的是选中商品的id
    //需要到store.getState().list中根据id计算总的价格;
    var total = 0
    for (var i in list) {
      for (var j in this.props.cart) {
        if (list[i] == this.props.cart[j].id) {
          total += this.props.cart[j].num * this.props.cart[j].price
        }
      }
    }
    return total
  }
  // // 全选事件
  // handleAllChange() {
  //   const { checkedAll, cart } = this.props.cart
  //   cart.map(function(item, index) {
  //     return (item.checked = !checkedAll)
  //   })
  //   this.setState({
  //     checkedAll: !checkedAll,
  //     checkedInvert: false,
  //     cart: listthis.props.cart
  //   })
  // }
  render() {
    return (
      <div className="cart">
        <table className="table table-border table-striped">
          <thead>
            <tr>
              <td>选择</td>
              <td>图片</td>
              <td>名称</td>
              <td>价格</td>
              <td>数量</td>
              <td>操作</td>
            </tr>
          </thead>
          <tbody>
            {this.props.cart.map((item, index) => {
              return (
                <tr key={index}>
                  <td>
                    <input
                      type="checkbox"
                      onClick={() => {
                        this.count(item.id)
                      }}
                    />
                  </td>
                  <td>
                    <img src={item.src} alt="" />
                  </td>
                  <td>{item.goodsname}</td>
                  <td>{item.price}</td>
                  <td>
                    <input
                      type="button"
                      value="-"
                      className="btn btn-xs"
                      onClick={() => {
                        this.props.cutNum1(index)
                      }}
                    />
                    {item.num}
                    <input
                      type="button"
                      value="+"
                      className="btn btn-xs"
                      onClick={() => {
                        this.props.addNum1(index)
                      }}
                    />
                  </td>
                  <td>
                    <input
                      type="button"
                      value="删除"
                      className="btn btn-primary"
                      onClick={() => {
                        this.props.del(index)
                      }}
                    />
                  </td>
                </tr>
              )
            })}
          </tbody>
        </table>
        <footer>
          <div className="quan">
            <label>全选</label>
            <input
              type="checkbox"
              onClick={() => {
                this.props.checkedAll()
              }}
              // onChange={this.handleAllChange}
            />
          </div>
          <div className="total">金额:{this.total()}</div>
          <input
            type="button"
            className="btn btn-primary"
            value={this.countNum()}
            // onClick={this.props.jie()}
          />
        </footer>
      </div>
    )
  }
}
Cart = connect(
  mapStateToProps,
  mapDispatchToProps
)(Cart)
export default Cart
